<style lang="less">
@import "./lineActivityDetail.less";
.li-selected{
  //  background: #2d8cf0;
  // color: #fff;
  background-color: #F0F0F0;
 }
</style>

<template>
  <div class="search" style="background-color:white;width:100%;height:100%;" id="pop">
    <div style="width:500px;border:1px solid #dddee1;border-radius:5px;float:left;margin-right:20px;">
      <template>
        <div style="width:100%;height:36px;line-height:36px;text-align:center;font-size:14px;font-weight:bold;color:#666;border-bottom:1px solid #dddee1;">
          线路活动详情
        </div>
        <Form ref="lineDetailForm" :model="lineDetailForm" :label-width="110" :rules="lineDetailFormValidate">
          <Form-item label="线路活动标题:" prop="title" style="padding-top:16px;">
            <label type="text">{{currentLine.title}}</label>
          </Form-item>
          <Form-item label="线路活动卖点:" prop="sellPoint">
            <label type="text">{{currentLine.sellPoint}}</label>
          </Form-item>
          <Form-item label="线路活动天数:">
            <div>
              <label type="text">{{currentLine.lineDay}}</label>
              <span style="width:40px;display:inline-block;text-align: center;">天</span>
              <label type="text">{{currentLine.lineNight}}</label>
              <span style="width:40px;display:inline-block;text-align: center;">晚</span>
            </div>
          </Form-item>
          <Form-item label="成形人数:" prop="totalNum">
            <label type="text">{{currentLine.totalNum}}</label>
          </Form-item>
          <Form-item label="门市价:" prop="storePrice">
            <label type="text">{{currentLine.storePrice}}</label>
          </Form-item>
          <Form-item label="最低价:" prop="price">
            <label type="text">{{currentLine.price}}</label>
          </Form-item>
          <Form-item label="活动开始时间:" prop="beginDate">
            <label type="text">{{currentLine.beginDate}}</label>
          </Form-item>
          <Form-item label="活动结束时间:" prop="endDate">
            <label type="text">{{currentLine.endDate}}</label>
          </Form-item>
          <Form-item label="报名开始时间:" prop="signStartDate">
            <label type="text">{{currentLine.signStartDate}}</label>
          </Form-item>
          <Form-item label="报名结束时间:" prop="signEndDate">
            <label type="text">{{currentLine.signEndDate}}</label>
          </Form-item>

          <Form-item label="出团时间:" prop="lineDate">
            <label type="text">{{currentLine.lineDate}}</label>
          </Form-item>
          <Form-item label="提前预定:" prop="lineBefore">
            <div>
              <span style="width:60px;display:inline-block;text-align: center;">建议提前</span>
              <label type="text">{{currentLine.lineBefore}}</label>
            </div>
          </Form-item>

          <Form-item label="出发城市:" prop="startCityArr">
            <label type="text">{{currentLine.linstartCityArrBefore}}</label>
          </Form-item>
          <Form-item label="目的城市:" prop="endCityArr">
            <label type="text">{{currentLine.endCityArr}}</label>
          </Form-item>
          <Form-item label="活动属性:" prop="linePropertity">
            <label type="text">{{currentLine.endCityArr}}</label>
          </Form-item>
          <Form-item label="图标设置:" prop="tagWord">
            <label type="text">{{currentLine.endCityArr}}</label>
          </Form-item>
          <Form-item label="推荐次数:" prop="recommendNum">
            <label type="text">{{currentLine.recommendNum}}</label>
          </Form-item>
          <Form-item label="满意度:" prop="satisfyScore">
            <label type="text">{{currentLine.satisfyScore}}</label>
          </Form-item>
          <Form-item label="销量:" prop="saleVolume">
            <label type="text">{{currentLine.saleVolume}}</label>
          </Form-item>
          <Form-item label="报名须知" prop="description">
            <label type="text">{{currentLine.description}}</label>
          </Form-item>
          <Form-item label="费用说明" prop="feeInclude">
            <label type="text">{{currentLine.feeInclude}}</label>
          </Form-item>
          <Form-item label="注意事项" prop="notice">
            <label type="text">{{currentLine.notice}}</label>
          </Form-item>
        </Form>
      </template>
    </div>

    <div style="width:500px;height:400px;border:1px solid #dddee1;border-radius:5px;float:left;margin-right:20px;">
      <template>
        <div style="width:100%;height:36px;line-height:36px;text-align:center;font-size:14px;font-weight:bold;color:#666;border-bottom:1px solid #dddee1;">
          报名供应商
        </div>
        <ul style="list-style-type:none;">
          <!-- <li style="cursor:pointer;width:100%;height:36px;line-height:36px;text-align:left;border-bottom: 1px solid #dddee1;">供应商1</li> -->
          <li v-bind:class="[item.selected ? 'li-selected' : '']" v-bind="joinSuppliers" v-for="item in joinSuppliers" :key="item.id" @click="selectedClick(item)" style="cursor:pointer;width:100%;height:36px;line-height:36px;text-align:left;padding-left:20px;border-bottom: 1px solid #dddee1;">{{item.name}}</li>
        </ul>
      </template>
    </div>

    <div style="width:500px;height:400px;border:1px solid #dddee1;border-radius:5px;float:left;">
      <template>
        <div style="width:100%;height:36px;line-height:36px;text-align:center;font-size:14px;font-weight:bold;color:#666;border-bottom:1px solid #dddee1;">
          报名产品
        </div>
        <ul style="list-style-type:none;">
          <li v-bind:class="[item.selected ? 'li-selected' : '']" v-bind="joinProducts" v-for="item in joinProducts" :key="item.id" style="cursor:pointer;width:100%;height:36px;line-height:36px;text-align:left;padding-left:20px;border-bottom: 1px solid #dddee1;">{{item.type}} > {{item.name}}</li>
          <!-- <li v-bind="count" v-bind:class="[item.checked ? 'li-checked' : '']" v-for="item in count" :key="item.id" :name="item.id"  @click="tagClick(item)" ></li> -->
        </ul>
      </template>
    </div>

    <div style="padding:16px 0px;margin-left:2px;clear:both;" class="operation">
      <Button @click="cancelSubmitLine" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
      <!-- <Button :loading="submitLoading" @click="submitLine" type="primary" :icon="lineActivityButtonTypeIcon" style="width:120px;">{{lineActivityButtonTypeText}}</Button> -->
    </div>

  </div>
  </template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";
import tinymce from "tinymce";

export default {
  name: "line-activity-config",
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    const validateactivityNameNoBlank = (rule, value, callback) => {
      var validObj = rule.validObj;
      var reg = new RegExp(validObj.regexp);
      if (reg.test(value)) {
        callback(new Error(validObj.msg));
      } else {
        callback();
      }
    };
    return {
      buttonTypeText: "添加",
      single: false,
      loading: true,
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "chevron-down",
      selectCount: 0,
      selectList: [],
      lineDetailForm: {
        title: "",
        sellPoint: "",
        lineDay: "",
        lineNight: "",
        totalNum: "",
        storePrice: "",
        price: "",
        signStartDate: "",
        signEndDate: "",
        beginDate: "",
        endDate: "",
        lineDate: "",
        lineBefore: "",
        startCity: "",
        endCity: "",
        linePropertity: "",
        tagWord: "",
        recommendNum: "",
        satisfyScore: "",
        saleVolume: "",
        lineContent: "",
        description: "",
        feeInclude: "",
        notice: "",
        startCityArr: [],
        endCityArr: []
      },
      currentLine: {
        title: "",
        sellPoint: "",
        lineDay: "",
        lineNight: "",
        totalNum: "",
        storePrice: "",
        price: "",
        signStartDate: "",
        signEndDate: "",
        beginDate: "",
        endDate: "",
        lineDate: "",
        lineBefore: "",
        startCity: "",
        endCity: "",
        linePropertity: "",
        tagWord: "",
        recommendNum: "",
        satisfyScore: "",
        saleVolume: "",
        lineContent: "",
        description: "",
        feeInclude: "",
        notice: "",
        startCityArr: [],
        endCityArr: []
      },
      joinSuppliers:[],
      joinProducts:[],

      layoutWay: "0",
      // layoutWaySelected: ture,
      modalType: 0,
      activityModalVisible: false,

      lineActivityDetailModalType: 0,
      lineActivityButtonTypeText: "添加",
      lineActivityButtonTypeIcon: "plus-round",

      lineDetailPropetyModalVisible: false,
      lineDetailTagModalVisible: false,
      lineDetailPropetyForm: {},

      modalTitle: "",

      // lineDetailForm: {
      //   sex: 1,
      //   type: 0
      // },
      userRoles: [],
      roleList: [],
      errorPass: "",
      lineDetailFormValidate: {
        title: [
          { required: true, message: "活动标题不能为空", trigger: "blur" },
          { max: 64, message: "活动标题不能太长" },
          {
            validator: validateactivityNameNoBlank,
            validObj: { regexp: /\s+/g, msg: "活动标题不允许包含空格" },
            trigger: "blur"
          }
        ]
      },
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "编号",
          key: "activityName",
          width: 120,
          sortable: true
        },
        {
          title: "名称",
          key: "activityName",
          width: 120,
          sortable: true
        },
        {
          title: "发起人",
          key: "activityName",
          width: 120,
          sortable: true
        },
        {
          title: "报价",
          key: "mobilePhone",
          width: 120,
          sortable: true
        },
        {
          title: "有效期",
          key: "email",
          width: 160,
          sortable: true
        },
        // {
        //   title: "产品状态",
        //   key: "sex",
        //   width: 160,
        //   align: "center",
        //   render: (h, params) => {
        //     let re = "";
        //     if (params.row.sex === 1) {
        //       re = "男";
        //     } else if (params.row.sex === 0) {
        //       re = "女";
        //     }
        //     return h("div", re);
        //   }
        // },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 150,
          render: (h, params) => {
            let re = "";
            if (params.row.status === 0) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "正常启用"
                )
              ]);
            } else if (params.row.status === -1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "禁用"
                )
              ]);
            }
          },
          filters: [
            {
              label: "正常启用",
              value: 0
            },
            {
              label: "禁用",
              value: -1
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.status === 0;
            } else if (value === -1) {
              return row.status === -1;
            }
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 240,
          align: "center",
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "ghost",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.disable(params.row);
                      }
                    }
                  },
                  "禁用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.enable(params.row);
                      }
                    }
                  },
                  "启用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        }
      ],
      data: [],
      exportData: [],
      total: 0,

      //图片模块
      //pictrue-module data start
      defaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: []
      //pictrue-module data end
    };
  },
  methods: {
    init() {
      // this.getactivityList();
      // this.cleanSelectCount();
    },

    resetFormByType: function(lineMapInfo) {
      // console.log(updateLine);
      if(lineMapInfo){
        this.currentLine = lineMapInfo.line;

        let res = this.parseLineMapInfo(lineMapInfo);
        this.joinProducts = res.productList;
        this.joinSuppliers = res.supplierList
      }
      

      this.$refs.lineDetailForm.resetFields();
      for (let attr in this.lineDetailForm) {
        if (this.lineDetailForm[attr] == null) {
          this.lineDetailForm[attr] = "";
        }
      }
    },
    
    parseLineMapInfo:function(lineMapInfo){
      let supplierList = [];
      let productList = [];
      var supplierIdList = []; //id不重复
      let hotelList = lineMapInfo.hotelList;
      let goodsList = lineMapInfo.goodsList;
      let goodsItemList = lineMapInfo.goodsItemList;
      
      if(hotelList.length > 0){
        hotelList.forEach(function(eachItem){
         
          if(eachItem){
            //组装酒店数据
            let tempHotel={
              id: eachItem.id,
              name: eachItem.title,
              type: '酒店',
              selected: false,
              supplierId: eachItem.supplierId
              // supplierName: eachItem.supplier.supplierName
            }
            productList.push(tempHotel);

            //组装供应商
            let eachItemSupplier = eachItem.supplier;
            if(eachItemSupplier){
              let tempSupplier ={
                id: eachItemSupplier.id,
                name: eachItemSupplier.supplierName,
                selected: false
              }
              if(supplierIdList.indexOf(eachItemSupplier.id) == -1){
                supplierIdList.push(eachItemSupplier.id);
                supplierList.push(tempSupplier);
              }
            }

          } 
        });
      }
      if(goodsList.length > 0){
        goodsList.forEach(function(eachItem){  
          if(eachItem){
            //组装特产数据
            let tempSpecial={
              id: eachItem.id,
              name: eachItem.goodsName,
              type: '特产',
              selected: false
            }
            productList.push(tempSpecial);

            let eachItemSupplier = eachItem.supplier;
            if(eachItemSupplier){
              let tempSupplier ={
                id: eachItemSupplier.id,
                name: eachItemSupplier.supplierName,
                selected: false,
                supplierId: eachItem.supplierId
              }
              //判断供应商是否重复
              console.log(supplierIdList);
              console.log(eachItemSupplier.id);
              console.log(supplierIdList.indexOf(eachItemSupplier.id));
              if(supplierIdList.indexOf(eachItemSupplier.id) == -1){
                supplierIdList.push(eachItemSupplier.id);
                supplierList.push(tempSupplier);
              }
            }

          }
        });
      }
      if(goodsItemList.length > 0){
        goodsItemList.forEach(function(eachItem){  
          if(eachItem){
            //组装通用商品数据
            let tempCommGoods={
              id: eachItem.id,
              name: eachItem.itemName,
              type: '通用商品',
              selected: false,
              supplierId: eachItem.supplierId
            }
            productList.push(tempCommGoods);

            let eachItemSupplier = eachItem.supplier;
            if(eachItemSupplier){
              let tempSupplier ={
                id: eachItemSupplier.id,
                name: eachItemSupplier.supplierName,
                selected: false
              }
              //判断供应商是否重复
              console.log(supplierIdList.indexOf(eachItemSupplier.id));
              if(supplierIdList.indexOf(eachItemSupplier.id) == -1){
                supplierIdList.push(eachItemSupplier.id);
                supplierList.push(tempSupplier);
              }
            }

          }   
        });
      }
      let res = {
        supplierList: supplierList,
        productList: productList
      }
      return res;
    },

    selectedClick(item){
      //1.设置供应商选中 只能一个选中
      let selectedSupplier = item;
      console.log(selectedSupplier);
      this.joinSuppliers.forEach(function(eachItem){ 
        if(eachItem){
          if(eachItem.id == selectedSupplier.id){
            eachItem.selected = true;
          }else{
            eachItem.selected = false;
          }
        }
      }); 

      //2.根据选中的供应商 联动选中供应商产品
      this.joinProducts.forEach(function(eachItem){ 
        if(eachItem){
          if(eachItem.supplierId == selectedSupplier.supplierId){
            eachItem.selected = true;
          }else{
            eachItem.selected = false;
          }
        }
      }); 
     
    },

    initCULineDetailForm() {
      // this.$refs.lineDetailForm.resetFields();
      for (let attr in this.lineDetailForm) {
        if (this.lineDetailForm[attr] == null) {
          this.lineDetailForm[attr] = "";
        }
      }

      let transferControlObj = this.$router.currentRoute.params;
      if (transferControlObj) {
        let modalType = transferControlObj.modalType;
        this.modalType = modalType;
        if (modalType === 1) {
          //获取数据回显
          this.buttonTypeText = "编辑";
          let _this = this;
          _this.loading = true;
          this.getRequest("/line/getLineById/" + transferControlObj.id).then(
            res => {
              _this.loading = false;
              let editLine = res.result;
              _this.lineDetailForm = editLine;
              // let editSupplierProvCode = JSON.parse(editSupplier.province).code;
              // let editSupplierCityCode = JSON.parse(editSupplier.city).code;
              // _this.supplierForm.supplierFormAddressArr = [editSupplierProvCode, editSupplierCityCode],
              // console.log( _this.supplierForm.supplierFormAddressArr);
              // _this.supplierModalVisible = true;
            }
          );
        } else {
          this.buttonTypeText = "添加";
        }
      }
    },

    lineDetailPropertySelect() {
      this.modalTitle = "属性设置";
      this.lineDetailPropetyModalVisible = true;
    },
    lineDetailTagSelect() {
      this.modalTitle = "图标设置";
      this.lineDetailTagModalVisible = true;
    },
    cancelLineReview() {
      this.lineDetailPropetyModalVisible = false;
    },
    submitLineReview() {},

    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getactivityList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getactivityList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    selectBirthdayDateRange(v) {
      if (v) {
        this.searchForm.startBirthday = v[0];
        this.searchForm.endBirthday = v[1];
      }
    },
    getactivityList() {
      this.loading = true;
      this.getRequest("/line/list", this.searchForm).then(res => {
        this.loading = false;
        if (res.success === true) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.init();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.init();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.init();
    },
    getRoleList() {
      this.getRequest("/role/getAllList").then(res => {
        if (res.success === true) {
          this.roleList = res.result;
        }
      });
    },
    handleDropdown(name) {
      if (name === "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "用户数据"
            });
          }
        });
      } else if (name === "refresh") {
        this.getactivityList();
      }
    },
    selectRoles(v) {},
    cancelactivity() {
      this.activityModalVisible = false;
    },
    submitLine() {
      this.$refs.lineDetailForm.validate(valid => {
        if (valid) {
          console.log("==============lineDetailForm===============");
          console.log(this.lineDetailForm);

          let url = "";
          if (this.lineDetailForm.lineDate) {
            this.lineDetailForm.lineDate = dateFormatUtil.format(
              new Date(this.lineDetailForm.lineDate),
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          if (this.lineDetailForm.signStartDate) {
            this.lineDetailForm.signStartDate = dateFormatUtil.format(
              new Date(this.lineDetailForm.signStartDate),
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          if (this.lineDetailForm.signEndDate) {
            this.lineDetailForm.signEndDate = dateFormatUtil.format(
              new Date(this.lineDetailForm.signEndDate),
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          if (this.lineDetailForm.beginDate) {
            this.lineDetailForm.beginDate = dateFormatUtil.format(
              new Date(this.lineDetailForm.beginDate),
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          if (this.lineDetailForm.endDate) {
            this.lineDetailForm.endDate = dateFormatUtil.format(
              new Date(this.lineDetailForm.endDate),
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          if (this.modalType === 1) {
            // 编辑用户
            url = "/line/update";
            this.submitLoading = true;

            let updateLine = this.lineDetailForm;

            delete updateLine.bookCount;
            delete updateLine.isHidden;
            delete updateLine.isLineBefore;
            delete updateLine.seatLeft;
            delete updateLine.showNum;

            this.putRequest(url, updateLine).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");

                this.$emit("on-line-activity-success", true);

                // this.$store.commit('clearCurrentTags', this);
                // this.$router.push({
                //     name: 'line-activity-manage'
                // });
                // this.init();
                // this.activityModalVisible = false;
              }
            });
          } else {
            url = "/line/create";
            this.submitLoading = true;
            let createLine = this.lineDetailForm;
            createLine.flag = "1";
            console.log("=============createLine===========");
            console.log(createLine);
            this.postRequest(url, createLine).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("操作成功");

                this.$emit("on-line-activity-success", true);

                //关闭当前添加界面 跳转到线路界面 刷新数据
                // this.$store.commit('clearCurrentTags', this);
                // this.$router.push({
                //     name: 'line-activity-manage'
                // });

                // this.init();
                // this.activityModalVisible = false;
              }
            });
          }
        }
      });
    },
    cancelSubmitLine: function() {
      this.$emit("on-line-config-cancel", true);
    },

    addactivity(v) {
      this.modalType = 0;
      this.modalTitle = "添加会员";
      this.$refs.lineDetailForm.resetFields();
      for (let attr in this.lineDetailForm) {
        if (this.lineDetailForm[attr] == null) {
          this.lineDetailForm[attr] = "";
        }
      }
      this.activityModalVisible = true;
    },
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "编辑会员";
      this.$refs.lineDetailForm.resetFields();
      // 转换null为""
      for (let attr in v) {
        if (v[attr] === null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let userInfo = JSON.parse(str);
      this.lineDetailForm = userInfo;
      // let selectRolesId = [];
      // this.lineDetailForm.roles.forEach(function(e) {
      //   selectRolesId.push(e.id);
      // });
      // this.lineDetailForm.roles = selectRolesId;
      this.activityModalVisible = true;
    },
    enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用用户 " + v.activityName + " ?",
        onOk: () => {
          this.postRequest("/activity/enable/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },
    disable(v) {
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要禁用用户 " + v.activityName + " ?",
        onOk: () => {
          this.postRequest("/activity/disable/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除用户 " + v.activityName + " ?",
        onOk: () => {
          this.deleteRequest("/activity/delete/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "chevron-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "chevron-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
      this.cleanSelectCount();
    },
    cleanSelectCount() {
      this.selectCount = 0;
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.deleteRequest("/activity/delete/" + ids).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    },

    //picture methods start
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url =
        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    }
    //picture methods end
  },
  mounted() {
    this.init();
    this.initCULineDetailForm();
    // this.getRoleList();
  }
};
</script>